<template>
	<view class="border">
		<u-navbar title="工单列表">
			<view slot="right" style="margin-right: 40upx;">
				<u-icon name="more-dot-fill" color="#333333" size="30"></u-icon>
			</view>
		</u-navbar>
		<view style="color: #000000;display: flex;width: 100%;background-color: #FFFFFF;display: flex;align-items: center;justify-content: space-between;height: 100upx;">
			<view style="display: flex;color: #666666;font-size: 26upx;margin-left: 20upx;align-items: center;">
				<view v-for="(item,index) in list" style="margin-left: 20upx;" :class="chick == item.name ? 'one' : ''" @click="chick = item.name">{{ item.name }}</view>
			</view>
			<view style="color: #0081F1;font-size: 24upx;margin-right: 35upx;display: flex; align-items: center;" @click="getOpen()"><image src="../../static/sx.png" style="width: 25upx;height: 25upx;padding-right: 5upx;"></image>筛选</view>
		</view>
		<view style="margin-top: 41upx;">
			<view class="border-list" v-if="item.status_text == chick" v-for="(item, index) in data" @click="getRouter(item.id, item.clue_id)">
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<view style="color: #333333;font-size: 30upx;font-weight: bold;">ID：{{ item.unique_id }}</view>
						<view class="tag">{{ item.type }}</view>
					</view>
					<view style="color: #333333;">{{ item.status_text }} > </view>
				</view>
				<view style="color: #333333;font-size: 28upx;font-weight: 500;margin-top: 34upx;">{{ item.desc }}</view>
				<view style="margin-top: 40upx;font-size: 24upx;color: #888888;">发起时间：{{ item.create_time }} 发起人：{{ item.realname }}</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" style="font-size: 19upx;margin-top: 20upx;" />
		<popup ref="child" @getlist="getlist"></popup>
		<bottom/>
	</view>
</template>

<script>
	import popup from '../../components/popup/popup.vue'
	import bottom from '../../components/bottom/index.vue'
	export default{
		components:{ popup , bottom },
		data () {
			return {
				data: [],
				chick: '待处理',
				list: [{
					name: '待处理'
				}, {
					name: '处理中'
				}, {
					name: '已处理'
				}],
				current: 0,
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '已经到底啦'
				}
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList (item) {
				this.param = item
					this.$request('', '/agencyApi/v1/agencyWorkOrderList', 'GET', this.param, {
					}).then(res => {
						this.data = res.data.data
						for (var i in this.data) {
							// this.data[i].create_data = this.data[i].create_time.slice(0, 10)
							// this.data[i].create_time = this.data[i].create_time.slice(11, 19)
							switch (this.data[i].type) {
								case 1:
								this.data[i].type = '跟单类型'
								break;
								case 2:
								this.data[i].type = '投诉类型'
								break;
								case 3:
								this.data[i].type = '废单类型'
								break;
							}
							switch (this.data[i].status) {
								case 0:
								this.data[i].status = '待处理'
								break;
								case 1:
								this.data[i].status = '无意向'
								break;
								case 2:
								this.data[i].status = '考虑中'
								break;
								case 3:
								this.data[i].status = '已预约'
								break;
								case 4:
								this.data[i].status = '已试听'
								break;
								case 5:
								this.data[i].status = '已报名'
								break;
								case 6:
								this.data[i].status = '疑似报名'
								break;
							}
						}
						console.log(this.data)
					})
			},
			change(index) {
				this.current = index;
			},
			getOpen () {
				this.$refs.child.getOpen()
			},
			getRouter (id ,clue_id) {
				uni.navigateTo({
					url: '/pages/order/detail?id=' + id + '&clue_id=' + clue_id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.one{
		color: #0081F1;
		font-size: 29upx;
		font-weight: bold;
	}
	.border{
		background-color: #F4F9FE;
		width: 100%;
		height: 100vh;
		overflow: scroll;
		.border-list{
			width: 690upx;
			height: 235upx;
			background: #FFFFFF;
			border-radius: 10upx;
			margin: 0 auto;
			padding: 4%;
			.tag{
				width: 96upx;
				height: 34upx;
				background: rgba(0, 129, 243, 0.1);
				border-radius: 3upx;
				text-align: center;
				line-height: 34upx;
				font-size: 20upx;
				color: #0081F1;
				margin-left: 34upx;
			}
		}
	}
</style>
